import React, { Component } from "react";
import ReactDOM from 'react-dom';
import { Square } from "./square";
// import ReactDOM from 'react-dom';
import {
    Observable,
    Subject,
    ReplaySubject,
    from,
    of ,
    range
} from 'rxjs';
import {
    map,
    filter,
    switchMap
} from 'rxjs/operators';

// range(1, 200)
//     .pipe(filter(x => x % 2 === 1), map(x => x + x))
//     .subscribe(x => console.log(x));



export class Board extends Component {
    constructor() {
        super();
        this.state = {
            squares: Array(9).fill(null),
        };
        this.handleClick.bind(this);
    }
    handleClick(i) {
        const squares = this.state.squares.slice();
        squares[i] = 'X';
        this.setState({
            squares: squares
        });
    }

    renderSquare(i) {
        return <Square value = {
            this.state.squares[i]
        }
        onClick = {
            () => this.handleClick(i)
        }
        />;
    }

    render() {
        const status = 'Next player: X';
        return ( <div>
            <div className = "status" > {status} </div> 
            <div className = "board-row" > 
            {this.renderSquare(0)} 
            {this.renderSquare(1)} 
            {this.renderSquare(2)} 
            </div> 
            <div className = "board-row" > 
            {
                this.renderSquare(3)
            } {
                this.renderSquare(4)
            } {
                this.renderSquare(5)
            }
            </div> 
            <div className = "board-row" > 
            {
                this.renderSquare(6)
            } {
                this.renderSquare(7)
            } {
                this.renderSquare(8)
            }
            </div> 
        </div>
        );
    }
}